<template>
  <div v-loading="loading">
    <!-- <div>收起/展开</div> -->
    <div class="boxlist" :style="styleBox">
      <el-button v-if="allList" type="primary" size="small" @click="selectAll">全选</el-button>
      <div v-for="item in filterList" :key="item.id" class="box-item">
        <div v-if="checkbox" class="box-check">
          <!-- 勾选 -->
          <el-checkbox v-model="item.check" @change="() => handleSelectionChange(item)"></el-checkbox>
        </div>
        <div class="box-info">
          <img :src="boxSvg" alt="箱子" class="box-svg" />
          <span class="box-index">{{ item.index }}/{{ total }}</span>
          <template v-if="isBoxList">
            <div class="box-status">
              <el-tag type="warning" size="mini" v-if="item.status === 'TO_OUTBOUND'">待出库</el-tag>
              <el-tag size="mini" v-if="item.status === 'OUT_BOUND'">已出库</el-tag>
              <el-tag type="success" size="mini" v-if="item.status === 'IN_BOUND'">已入库</el-tag>
              <!-- <el-tag type="danger" v-if="item.status === 'UNPACK'">已拆箱</el-tag> -->
            </div>
          </template>
          <VueBarcode :value="item.boxCode" height="30px" :width="1" :fontSize="16" class="box-code"
            :background="'transparent'" />
        </div>
        <div class="box-sku">
          <slot name="btn" v-bind:row="item" />
          <div v-for="asn in item.asn" :key="asn.index" class="sku-asn">
            ASN号：{{ asn }}
          </div>
          <div v-for="sku in item.boxDetailVOS" :key="sku.id" class="sku-item">
            <div class="sku-logo">
              <VueBarcode :value="sku.skuCode" height="30px" :width="1" :fontSize="16" class="box-code"
                :background="'transparent'" />
            </div>
            <div class="sku-name ellipsis">{{ sku.skuName }}</div>
            <div class="sku-num">×{{ sku.count }}</div>
            <div class="sku-info">
              <span>箱/体积：<span v-if="item.boxStrong !== null">{{ item.boxStrong }}*{{ item.boxWide }}*{{
                item.boxHigh
              }}</span><span v-else> - </span></span>
              <span style="padding-left: 10px"><span v-if="item.weight !== null">箱/毛重：{{ item.weight }}KG</span><span
                  v-else> - </span></span>
            </div>
          </div>
        </div>
        <div v-if="statusSelect" class="box-other">
          <!-- {{ item.shipmentOrderStatus }} -->
          请选择出库状态：<DictSelect v-model="item.shipmentOrderStatus" :options="item.range" size="small"
            :disabled="item.finish"></DictSelect>
        </div>
        <div v-if="WAR" class="box-warehouse">
          <div class="box-warehouse-item">
            <p>{{ $t('common.warehouseingName') }}:{{ item.warehouseName }}</p>
            <p>{{ $t('common.areaName') }}:{{ item.areaName }}</p>
            <p>{{ $t('common.container') }}:{{ item.rackName }}</p>
          </div>
        </div>
      </div>
    </div>
    <div v-if="listData.length === 0">
      <el-empty description="暂无数据" />
    </div>
    <div v-if="isPagination" class="clearfix" style="text-align: right;">
      <el-pagination style="overflow: hidden" background layout="slot, total, sizes, prev, pager, next"
        :current-page.sync="pageReq.page" :page-size.sync="pageReq.size" :page-sizes="[10, 15, 20, 25, 30]" :total="total"
        @size-change="handleSizeChange" @current-change="handleCurrentChange" />
    </div>
  </div>
</template>
<script>
// import boxSvg from './box.svg'
import boxSvg from './catbox.svg'
import VueBarcode from 'vue-barcode'
import request from '@/utils/request.js'
import ItemSelect from '@/views/components/ItemSelect'

export default {
  components: { VueBarcode, ItemSelect },
  props: {
    url: {
      type: String,
      default: ''
    },
    returnData: {
      type: [Function, String],
      default: ''
    },
    params: {
      type: Object,
      default() {
        return {}
      }
    },
    // 是否显示勾选框
    checkbox: {
      type: Boolean,
      default: false
    },
    methodType: {
      type: String,
      default: 'get'
    },
    rowKey: {
      type: String,
      default: 'id'
    },
    // 是否分页
    isPagination: {
      type: Boolean,
      default: true
    },
    // 样式
    styleBox: {
      type: String,
      default: ''
    },
    // 是否全部数据
    allList: {
      type: Boolean,
      default: false
    },
    value: {
      type: Array,
      default: () => []
    },
    // 是否显示状态变更下拉框
    statusSelect: {
      type: Boolean,
      default: false
    },
    // 是否是箱子列表
    isBoxList: {
      type: Boolean,
      default: false
    },
    pageReq: {
      type: Object,
      default() {
        return {}
      }
    },
    // 仓库库区是否显示
    WAR: {
      type: Boolean,
      default: true
    }
  },
  watch: {
    params: {
      handler(v) {
        this.watchParams = JSON.parse(JSON.stringify(v))
        this.originalParams = JSON.parse(JSON.stringify(v))
      },
      deep: true,
      immediate: true
    },
    value: {
      handler(v) {
        if (v) {
          this.listData = v.map(ele => ({
            ...ele,
            boxDetailVOS: ele.boxDetailVOS || ele.itemList
          }))
          if (this.isPagination) {
            // 设置静态分页
            this.setPageination()
          }
        }
      },
      immediate: true
    }
  },
  computed: {
    filterList() {
      if (this.allList) {
        return this.listData.filter((f, index) => {
          return index < this.pageSize * this.pageNum && this.pageSize * (this.pageNum - 1) <= index
        })
      }
      return this.listData
    }
  },
  data() {
    return {
      boxSvg,
      pageSize: 10,
      pageNum: 1,
      originalParams: {},
      watchParams: {},
      loading: false,
      total: 0,
      listData: [],
      selectionData: [],
      diffSelect: []
    }
  },
  methods: {
    setData(data) {
      this.listData = data
      this.setPageination()
    },
    // 单页个数
    handleSizeChange(val) {
      this.pageReq.size = val
      if (!this.allList) {
        this.getList()
      }
    },
    // 跳页
    handleCurrentChange(val) {
      this.pageReq.page = val
      if (!this.allList) {
        this.getList()
      }
    },
    setParamsBefore() {
      var t = {
        pageSize: this.pageSize,
        pageNum: this.pageNum,
        ...this.watchParams
      }
      return t
    },
    // 列表查询
    getList() {
      if (!this.url) return
      this.loading = true
      const req = {
        ...this.pageReq,
        page: this.pageReq.page - 1
      }
      this._request({...req}, this.setParamsBefore())
        .then(r => {
          var res = r
          let list = []
          if (typeof this.returnData === 'function') {
            list = this.returnData(res)
          } else {
            list = res.data
          }
          this.listData = list.map((l, index) => {
            l.index = index + this.pageSize * (this.pageNum - 1) + 1
            l.check = l.check || false
            return l
          })

          if (this.checkbox) {
            this.diffSelect = []
            this.toggleRowForEarch(this.selectionData)
          }
          if (this.listData.length > res.totalElements) {
            this.total = this.listData.length
          } else {
            this.total = res.totalElements
          }

          this.loading = false
        })
        .catch(e => {
          this.listData = []
          this.loading = false
        })
    },
    _request(req, data) {
      if (this.methodType === 'post') {
        return request({
          url: this.url,
          method: 'post',
          data: data,
          params: req
        })
      } else {
        return request.get(this.url, data)
      }
    },
    handleSelectionChange(_val) {
      try {
        var val = this.$_.cloneDeep([_val])
        // 设置勾选，并存下数据，即使翻页保存数据
        // 当前页排除已选的相同
        var _del_diff = this.$_.differenceBy(val, this.diffSelect, this.rowKey)
        // var choose = [...val, ..._del_diff]
        // 所有页排除已选的相同
        var diff = this.$_.differenceBy(this.selectionData, val, this.rowKey)
        this.selectionData = [...diff, ..._del_diff]
      } catch (error) {
        console.log(error)
      }
      this.toggleRowForEarch(this.selectionData)
      const selectionData = this.listData.filter(r => {
        if (r.check) {
          return r
        }
      })
      this.$emit('selection-change', selectionData)
      var c = this.$_.differenceBy(this.diffSelect, val, this.rowKey)
      this.diffSelect = [...c, ..._del_diff]
      this.$forceUpdate()
    },
    toggleRowForEarch(rows) {
      // var idObject = this.$_.groupBy(rows, this.rowKey)
      try {
        this.listData.map((row, index) => {
          row.check != row.check
          // row.check = !!idObject[row[this.rowKey]]
          // this.$set(this.listData[index], 'check', !!idObject[row[this.rowKey]])
        })
      } catch (error) {
        console.log(error)
      }
    },
    // 全选
    selectAll() {
      this.$emit('selection-change', this.listData)
      this.listData.map(r => (r.check = true))
      this.$forceUpdate()
    },
    // 设置总数
    setPageination() {
      this.total = this.listData.length
    }
  }
}
</script>
<style lang="scss" scoped>
.box-item {
  display: flex;
  border-bottom: 1px solid #dcdfe6;
  padding: 10px;

  .box-code {
    max-width: 100px;
    max-height: 68px;
  }

  .box-check {
    flex: 0 0 80px;
    align-self: center;
    text-align: center;
  }

  .box-info {
    flex: 0 0 100px;
    position: relative;
    font-size: 0;

    img {
      // max-width: 150%;
      max-width: 330%;
      max-height: 102%;
    }

    .box-code {
      width: 100%;
      position: absolute;
      left: 44px;
      top: 44px;
      z-index: 1;
    }

    .box-index {
      position: absolute;
      right: 32px;
      top: 4px;
      z-index: 1;
      font-size: 12px;
    }
    .box-status {
      display: inline-block; 
      margin-left: 20px;
      position: absolute;
      top: 2px;
      left: 190px;
    }
  }
  .box-warehouse {
    flex: 20 1 auto;
    padding-top: 44px;
    position: relative;
    .box-warehouse-item {
      position: relative;
      background-color: #f2f6fc;
      display: inline-block;
      display: inline-block;
      padding: 10px 30px 20px 30px;
      border-radius: 10px;
      position: relative;
      line-height: 1.75;
    } 
  }
  .box-sku {
    flex: 1 1 auto;
    padding-left: 250px;
    padding-top: 34px;
    position: relative;

    .sku-logo {
      position: absolute;
      left: 0;
      top: 0;
    }

    .sku-asn {
      position: relative;
      background-color: #f2f6fc;
      display: inline-block;
      display: inline-block;
      // padding: 10px 30px 30px 130px;
      padding: 10px 30px 30px 180px;
      border-radius: 10px;
      position: relative;
      line-height: 1.75;
      margin-bottom: 10px;
    }

    .sku-item {
      position: relative;
      background-color: #f2f6fc;
      display: inline-block;
      display: inline-block;
      // padding: 10px 30px 30px 130px;
      padding: 10px 30px 30px 180px;
      border-radius: 10px;
      position: relative;
      line-height: 1.75;
    }

    .sku-name {
      width: 130px;
    }

    .sku-num {
      color: #409EFF;
      position: absolute;
      right: 8px;
      top: 10px;
    }
  }

  .box-other {}
}
</style>
  